<template>
<div id='loginbig'>
  <NavBar>
    <div></div>
    <div slot="center">登录</div>
  </NavBar>

<div>
  <div class="mobilelogin">用户登录</div>
<div class="username">
<van-cell-group>
  <van-field v-model="username" label="用户名" />
</van-cell-group>
</div>
  <div class="username">
    <van-field v-model="password" type="password" label="密码" />
  </div>
  <div class="for_login">
    <van-button type="primary" @click="loginclick">登录</van-button>
    </div>
  <div class="register">
    <van-button type="info" @click="Registerclick">注册</van-button>
  </div>
  </div>

  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
import {formLogin} from "@/network/Users/Login";

export default {
name: "Login",
  components:{
  NavBar
  },
    data() {
    return {
      username: '',
      password:'',
      checked:''
    };
  },
  methods:{
  Registerclick(){
    this.$router.push('/register')
  },
    loginclick(){
    formLogin(this.username,this.password).then(
        res=>{
          if (
              res.code!==0
          ){this.$notify('用户名或密码错误')}
          else{
              this.$toast.success('登录成功')
              this.$router.push('/profile')
          }
        }
    )

    }
  },
  created() {

  }
}
</script>

<style scoped>
.mobilelogin{
  text-align: center;
  padding-top: 10px;
  color: #000011;
  position: relative;
  top: 20px;
}
#loginbig{
  height: 700px;
  background-color: rgb(247, 248, 250);

}
#loginbig .username{
  padding-top: 50px;
  width: 300px;

  margin:0 auto ;
}
#loginbig .van-cell{
  border-radius:20px 20px 20px 20px;
}
.for_login{
  position: absolute;
  top:355px;
  left:100px;
  border-radius:20px 20px 20px 20px;
}
.register{
    position: absolute;
  top:355px;
  left:200px;
  border-radius:20px 20px 20px 20px;

}
#loginbig .van-button{
  border-radius: 20px 20px 20px 20px;
width: 75px;
}
.agree{
  font-size: 14px;
  position: absolute;
  top:320px;
  margin: 0 auto;
  left: 15px;
}
/deep/ .van-cell-group{
  border-radius: 20px 20px 20px 20px;
}
</style>